<template>
    <div>
        <div class="title_box">
          <div class="iconfont icon-left" @click="$router.go(-1)"></div>
          <div class="title"></div>
          <div></div>
        </div>

        <div class="content">
            <div class="success">
                <span class="iconfont icon-success"></span>
                支付成功
            </div>
            <div class="btn">
                <router-link tag="div" to="/home">返回首页</router-link>
                <router-link tag="div" to="/order?conId=0">查看订单</router-link>
            </div>
            <div class="Voucher">
              <div class="left">
                <div class="title">恭喜您获得10大元红包</div>
                <div class="text">邀请好友得更多</div>
                <div class="Voucher-btn">去领取</div>
              </div>
              <div class="right">
                <img src="https://z3.ax1x.com/2021/05/09/gYwcCT.png" />
              </div>
            </div>
            <div>
                <waterfall></waterfall>
            </div>
        </div>
    </div>
</template>

<script>
import waterfall from "../components/comm/Recommend"
export default {
    components:{
        waterfall
    }
}
</script>

<style lang="less" scoped>
    .content{
        .success{
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            margin: 30px 0px;
            .iconfont{
                color: #FD5103;
                font-size: 30px;
            }
        }
        .btn{
            display: flex;
            justify-content: center;
            div{
                border: 1px solid #E2E2E2;
                margin: 0px 40px;
                padding: 10px 30px;
                border-radius: 30px;
                font-size: 28px;
                color: #616060;
            }
        }
        .Voucher {
            width: 80%;
            margin: 0px auto;
            background: #faf3eb;
            position: relative;
            padding: 20px 40px;
            margin: 40px 20px;
            .left {
              .title {
                font-size: 30px;
                font-weight: 600;
                color: #333;
              }
              .text {
                font-size: 28px;
                margin-top: 5px;
                margin-bottom: 10px;
                color: #9d9998;
              }
              .Voucher-btn {
                display: inline;
                padding: 10px 20px;
                background: #fee998;
                color: #e89402;
                border-radius: 10px;
                font-size: 24px;
              }
            }
            .right {
              width: 150px;
              height: 150px;
              position: absolute;
              right: 0px;
              top: 10px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
    }
    .title_box {
      height: 60px;
      line-height: 60px;
      padding: 7px 0px;
      text-align: center;
      background: #fff;
      border-bottom: 1px solid #E8E8E8;
      display: flex;
      justify-content: space-around;
      div:nth-child(odd){
          flex: 1;
          font-size: 18px;
      }
      .title {
        flex: 6;
        font-size: 20px;
      }
    }
</style>